<template>
  <div
    style="padding-bottom: 20px"
    class="clear variable-container definedTemplate"
  >
    <!-- 侧边目录 -->
    <div style="minwidth:180px;marginRight:1%">
      <DatabaseSidebar :get-template="getTemplate" @managementVariable="managementVariable" />
    </div>
    <div style="width:100%">
      <!-- 变量管理部分 -->
      <DatabaseVariable :self-defined-template="selfDefinedTemplate" :directory-list="directoryList" />
    </div>
  </div>
</template>

<script>
import DatabaseSidebar from './components/DatabaseSidebar.vue'
import DatabaseVariable from './components/DatabaseVariable.vue'
export default {
  components: {
    DatabaseSidebar,
    DatabaseVariable
  },
  props: {
    selfDefinedTemplate: { type: Array, default: () => [] }, // 拖拽的数据
    getTemplate: { type: Array, default: () => [] } // 渲染的目录
  },
  data() {
    return {
      directoryList: [] // 右侧数据渲染的地方
    }
  },
  methods: {
    // 侧边栏传递过来修改的
    managementVariable(e) {
      console.log('eeeeeee', e)
      // 将数据传递给右边渲染的地方
      this.directoryList = e
    }
  }

}
</script>

<style lang="scss" scoped>
.is-preview-wrap {
  margin: 0;
  // width: calc(100% - 100px);
}
.no-preview-wrap {
  display: flex;
  justify-content: center;
}
.definedTemplate {
  display: flex;
}
</style>
